<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lieb.css">
    <script src="./echarts.min.js"></script>
</head>

<body>
    <!-- 左侧 -->
    <div class="l">
        <div class="s">
            <div class="zi">// 当前比对数据 //</div>
            <div class="da">3,456,789</div>
        </div>
        <div class="tou">违法犯罪人员分析</div>
        <div class="z">
        </div>
        <div class="tou" style="margin-top:10px;">人口出入记录</div>
        <div class="d" style="margin-top:6px;">
            <table width="100%" cellspacing='0' class="table">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>角色</th>
                        <th>开门方式</th>
                        <th>时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="y">张梦</td>
                        <td class="e">访客</td>
                        <td class="s1">人脸</td>
                        <td class="ss">2018-11-01 13:51:23</td>
                    </tr>
                    <tr>
                        <td class="y">李阳荣</td>
                        <td class="e">业主</td>
                        <td class="s1">APP</td>
                        <td class="ss">2018-11-01 13:51:23</td>
                    </tr>
                    <tr>
                        <td class="y">张无双</td>
                        <td class="e">访客</td>
                        <td class="s1">人脸</td>
                        <td class="ss">2018-11-01 13:51:23</td>
                    </tr>
                    <tr>
                        <td class="y">李阳</td>
                        <td class="e">业主</td>
                        <td class="s1">APP</td>
                        <td class="ss">2018-11-01 13:51:23</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 中间 -->
    <div class="c">
        <div class="tt">智慧社区内网比对平台</div>
        <div class="tt1"></div>
        <div class="bb">
            <div class="le">
                <div class="a">
                    <div class="ta">16:19:50</div>
                    <div class="taa">2020/1/21 pm 周2</div>
                </div>
                <div class="a1">|</div>
                <div class="a2">
                    <div class="ll">
                        <div class="th">多云</div>
                        <div class="th">16~22°C</div>
                        <div class="th">天津市和平区</div>
                    </div>
                </div>
            </div>
            <div class="lc"></div>
            <div class="re">
                <div class="zzz"> NO.1北京 : 2543289人</div>
                <div class="zzz1"> NO.1天津 : 5690</div>
                <div class="zzz2"> NO.1河北 : 456</div>
            </div>
        </div>
        <div class="cc"></div>
    </div>
    <!-- 右侧 -->
    <div class="r">
        <div class="tou">违法犯罪人员年龄分布</div>
        <div class="fz1"></div>
        <div class="tou1">违法犯罪人员地区分布</div>
        <div class="fz2"></div>
        <div class="tou1">人口出入时间段统计</div>
        <div class="fz3"></div>
    </div>
</body>

</html>
<script>
    // 左侧第一个饼图
    var z = document.querySelector('.z');
    var myChart = echarts.init(z);
    var option = {
        legend: {
            orient: 'verticl',
            left: 'left',
            data: ['卖淫嫖娼', '经侦嫌疑', '重点人口', '刑侦重点', '吸毒人口']
        },
        series: [{
            name: '犯罪记录',
            type: 'pie',
            radius: '50%',
            center: ['70%', '70%'],
            emphasis: {
                label: {
                    show: true,
                    fontSize: '8',
                }
            },
            data: [{
                value: 335,
                name: '卖淫嫖娼'
            }, {
                value: 310,
                name: '经侦嫌疑'
            }, {
                value: 274,
                name: '重点人口'
            }, {
                value: 235,
                name: '刑侦重点'
            }, {
                value: 400,
                name: '吸毒人口'
            }]
        }]
    };
    myChart.setOption(option);
    // 右侧第一个饼图
    var fz1 = document.querySelector('.fz1');
    var myChart1 = echarts.init(fz1);
    var option1 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'verticl',
            top: '5%',
            left: 'left'
        },
        series: [{
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['70%', '50%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '13',
                }
            },
            labelLine: {
                show: false
            },
            data: [{
                value: 200,
                name: '18-30'
            }, {
                value: 200,
                name: '31-40'
            }, {
                value: 150,
                name: '41-50'
            }, {
                value: 50,
                name: '51-60'
            }, {
                value: 50,
                name: '65岁以上'
            }, {
                value: 350,
                name: '未标明'
            }]
        }]
    };
    myChart1.setOption(option1);
    // 第三个柱状图
    var fz2 = document.querySelector('.fz2');
    var myChart2 = echarts.init(fz2);
    var option2 = {
        xAxis: {
            data: ['河北', '天津', '北京', '新疆', '内蒙', '宁夏', '海南']
        },
        yAxis: {
            max: 400,
            min: 0
        },
        legend: {
            title: {
                text: '单位:岁'
            },
            orient: 'verticl',
            left: 'left',
            data: ['18-30', '31-40', '41-50', '51-60', '65岁以上', '未标明']
        },
        series: [{
            // name: '单位:岁',
            type: 'bar',
            data: [20, 50, 200, 320, 390, 350, 240]
        }]
    };
    myChart2.setOption(option2);
    // 第四个折线图
    var fz3 = document.querySelector('.fz3');
    var myChart3 = echarts.init(fz3);
    var option3 = {
        xAxis: {
            data: ['6:00-9:00', '10:00-12:00', '13:00-15:00', '16:00-20:00', '21:00-24:00']
        },
        yAxis: {
            max: 800,
            min: 0
        },
        legend: {
            title: {
                text: '单位:岁'
            },
            orient: 'verticl',
            left: 'left',
            data: ['18-30', '31-40', '41-50', '51-60', '65岁以上', '未标明']
        },
        series: [{
            type: 'line',
            data: [800, 300, 500, 800, 300]
        }]
    };
    myChart3.setOption(option3);
</script>